/*
  学习目标：props的两大特点
  步骤：
     1. props可以接受任意数据类型
      1.1 string、number、boolean、undefined、null
      1.2  对象、数组
      1.3 💥函数、JSX
*/
import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        <Child
          name="zs"
          age={18}
          // boolean
          isShow={true}
          un={undefined}
          nu={null}
          zs={{ intro: '狂徒' }}
          list={[1, 2, 3]}
          // 💥
          fn={() => alert(132)}
          title={<i>我斜了</i>}
        ></Child>
      </div>
    );
  }
}

function Child({ name, age, isShow, nu, un, zs, list, fn, title }) {
  console.log('fn  ----->  ', fn);

  return (
    <div>
      Child
      <h1>{isShow}</h1>
      <h2>{zs.intro}</h2>
      {list.map((item) => {
        return <h3 key={item}>{item}</h3>;
      })}
      <button onClick={fn}>点我一下</button>
      <h4> {title}</h4>
    </div>
  );
}
